<template>
  <div class="hotel-container">
    <div class="breadcrumb">
      <div>
        <span>
          网站SEO信息
        </span>
      </div>
      <div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="openDiglog"
          size="mini"
          plain
          v-hasPermi="['business:seo:edit']"
        >修改</el-button>
        <el-button
          icon="el-icon-refresh"
          @click="getseoInfo()"
          size="mini"
          plain
        >刷新</el-button>
        <el-radio-group v-model="queryParams.english" @change="getseoInfo()" size="mini" style="margin-left: 10px;">
          <el-radio-button label="0">中</el-radio-button>
          <el-radio-button label="1">en</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <!-- 信息展示区域 -->
    <el-card class="info-card">
      <div class="title-section">
        <h2>{{ seoInfo.comName }}</h2>
      </div>
      <!-- 详细信息 -->
      <el-descriptions :column="1" class="detail-info" :label-style="label_style">
        <el-descriptions-item label="网站名称">{{ seoInfo.title }}</el-descriptions-item>
        <el-descriptions-item label="关键词">{{ seoInfo.keyword }}</el-descriptions-item>
        <el-descriptions-item label="描述">{{ seoInfo.description }}</el-descriptions-item>
      </el-descriptions>
      <div class="service-des">
        <el-descriptions :column="1" class="detail-info" :label-style="label_style">
          <el-descriptions-item label="顶部执行js">{{ seoInfo.topJs }}</el-descriptions-item>
          <el-descriptions-item label="底部执行js">{{ seoInfo.bottomJs }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="service-section">
        <h3>图片</h3>
        <div class="pic-group">
          <div
            class="pic-item"
          >
            <el-image
              :src="baseUrl + seoInfo.logo"
              fit="cover"
              class="preview-image"
              :preview-src-list="[baseUrl + seoInfo.logo]"
            >
              <div slot="error" class="image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div class="main-label">网站LOGO</div>
          </div>
          <div
            class="pic-item"
          >
            <el-image
              :src="baseUrl + seoInfo.ico"
              fit="cover"
              class="preview-image"
              :preview-src-list="[baseUrl + seoInfo.ico]"
            >
              <div slot="error" class="image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div class="main-label">标签栏图标</div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑SEO信息" :visible.sync="dialogVisible" width="900px" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="form" ref="form" label-width="120px" v-loading="loading" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="网站名称" prop="title">
              <el-input v-model="form.title" placeholder="请输入网站名称" />
            </el-form-item>
            <el-form-item label="关键词" prop="keyword">
              <el-input v-model="form.keyword" type="textarea" placeholder="请输入关键词" :autosize="{ minRows: 3, maxRows: 10 }"/>
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input v-model="form.description" type="textarea" placeholder="请输入描述" :autosize="{ minRows: 3, maxRows: 10 }"/>
            </el-form-item>
            <el-form-item label="顶部执行js" prop="topJs">
              <el-input v-model="form.topJs" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 3, maxRows: 10 }"/>
            </el-form-item>
            <el-form-item label="底部执行js" prop="bottomJs">
              <el-input v-model="form.bottomJs" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 3, maxRows: 10 }"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="网站LOGO" prop="logo">
              <image-upload v-model="form.logo" :limit='1' :fileSize='1'/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签栏图标" prop="ico">
              <image-upload v-model="form.ico" :limit='1' :fileSize='1' :fileType = '["ico"]' />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveChanges">保 存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listSeo, getSeo, delSeo, addSeo, updateSeo } from "@/api/business/seo";

export default {
  data() {
    return {
      dialogVisible: false,
      seoInfo: {},
      form: {},
      baseUrl:process.env.VUE_APP_BASE_API,
      loading:false,
      rules: {
        logo: [
          { required: true, message: "网站LOGO不能为空", trigger: "blur" }
        ],
        title: [
          { required: true, message: "网站名称不能为空", trigger: "blur" }
        ],
        ico: [
          { required: true, message: "标签栏图标不能为空", trigger: "blur" }
        ],
      },
      label_style: {
            'color': '#909399',
            'width': '100px',
      },
      queryParams: {
        english: '0',
      },
    };
  },
  created() {
    this.getseoInfo()
  },
  methods: {
    getseoInfo(){
      listSeo(this.queryParams).then(response => {
        this.seoInfo = response.rows[0]
      });
    },
    saveChanges() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          updateSeo(this.form).then(response => {
            this.loading = false
            if (response.code === 200) {
              this.dialogVisible = false;
              this.getseoInfo()
              this.$message.success('已保存');
            }
          });
        }
      })
    },
    openDiglog(){
      this.form = {...this.seoInfo}
      this.dialogVisible = true
    }
  }
};
</script>

<style scoped>
.hotel-container {
  padding: 20px;
}

.info-card {

}

.service-des {
  margin-top: 30px;
  border-top: 1px solid #ebeef5;
}

.service-section {
  margin-top: 30px;
  padding: 20px;
  border-top: 1px solid #ebeef5;
}

.main-label {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #409eff;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.title-section {
  padding: 0 20px 0 20px;
}

.breadcrumb {
  margin-bottom: 20px;
  padding: 10px 15px;
  background: #f5f7fa;
  border-radius: 4px;
  display:flex;
  justify-content:space-between;
}

.breadcrumb-item {
  color: #606266;
  cursor: pointer;
  transition: color 0.3s;
}

.breadcrumb-item:hover {
  color: #409EFF;
}

.pic-group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}

.pic-item {
  width: 120px;
  height: 120px;
  border: 1px dashed #;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  float: left;
  margin-right: 5px;
}

.pic-item:hover {
  border-color: #409eff;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
}
.image-error i {
  font-size: 120px;
  color: #909399;
}

.main-label {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #409eff;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.detail-info {
  margin-top: 20px;
  padding: 0px 20px 0px 20px;
}
</style>
